<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React 初体验</title>
    <!-- 1. 引入 js 文件 react 的核心文件 要首先引入该文件 声明全局变量 React -->
    <script src="./js/react.development.js"></script>
    <!-- react-dom 是 react 操作 DOM 的扩展文件  声明全局变量 ReactDOM-->
    <script src="./js/react-dom.development.js"></script>
  </head>
  <body>
    <!-- 2. 创建 html 容器元素 常用的两个 id 名字, root 与 app-->
    <div id="root"></div>

    <!-- 3. 创建 script 标签 使用 react-->
    <script>
      //4. 创建 react 元素  需求: 使用 react 呈现一个 h2 标签, 并且文本为『hello react』
      let el = React.createElement('h2', {title: 'react初体验', name:'五月天'}, '五月天涉嫌假唱~~~'); // <h2 title="react初体验" name="五月天"></h2>

      //5. 渲染(render): 将 React 元素转为真实 DOM, 插入文档中
      ReactDOM.render(el, document.querySelector('#root'));
    </script>
  </body>
</html>
